<template>
    <div class="cart">
        购物车
            <ul>
                <li v-for="item in list" :key="item.id">
                    <van-checkbox v-model="item.isSelected" >
                        <div class="item">
                            <img :src="item.list_pic_url" alt="">
                            <p>{{ item.goods_name }}</p>
                            <p>{{ item.retail_price }}</p>
                        </div>
                    </van-checkbox>
                </li>
            </ul>
        <!-- <van-radio-group v-model="radio">
            <van-radio name="1">全选</van-radio>
        </van-radio-group> -->
        <div class="fixBot">
            <van-checkbox v-model="isAllSelected" >全选按钮{{ total  }}    </van-checkbox>
            <button @click="submit">下单</button>
        </div>
    </div>
</template>

<script>
import {
    cartList,
    submitAction
} from "@/api/cart"
export default {
    data() {
        return {
            list:[],
            isSelected:true,
            
            // isAllSelected:false
        };
    },
    computed: {
        // isAllSelected(){
           
        // },
        total(){
            return this.list.reduce((total,current)=>{
                if(current.isSelected){
                    return total + current.number*current.retail_price
                }else{
                    return total
                }
            },0)
        },
        isAllSelected:{
            get(){
                if(this.list.length == 0){
                    return false
                }
                return this.list.every(ele =>ele.isSelected)
            },
            set(val){
                this.list.forEach(el=>{
                    el.isSelected = val
                })
            }
        }
    },
    created() {
        cartList({
            openId:localStorage.getItem("openId")
        })
        .then(res =>{
            console.log(res)
            // 1. 直接找后端人员 商量更改数据
            // 2. 自己添加一些数据辅助完成对应的功能
            res.data.forEach(ele =>{
                ele.isSelected = false
            })
            this.list = res.data;
        })
    },
    mounted() {

    },
    methods: {
        submit(){
            // var str;
            // console.log(this.list.filter(ele =>ele.isSelected))
            
            submitAction({
                allPrise:this.total,
                // 先获取选中的数据 再map
                goodsId:this.list.filter(ele =>ele.isSelected).map(ele =>ele.goods_id).join(","),
                openId:localStorage.getItem("openId")
            })
            .then(res =>{
                this.$router.push("/cart/order")
            })
        }
    },
};
</script>

<style scoped lang="scss">
.cart{
    ul{
        padding-bottom: 140px;
        .item{
            display: flex;
            align-items: center;
            img{
                width: 100px;
                height: 100px;
            }
        }
    }
    .fixBot{
        position: fixed;
        left: 0;
        bottom: 100px;
        right: 0;
        padding:20px;
        background: #fff;
    }
}
</style>
